/*
 * @Author: jiayu
 * @Date: 2022-08-04 16:12:56
 * @LastEditors: jiayu
 * @LastEditTime: 2023-11-07 17:01:49
 * @Description:
 */
import Card from '@/components/Card';
import { Pie } from '@ant-design/plots';
import { Button, Popover } from 'antd';
import { Dispatch, memo, SetStateAction, useEffect, useState } from 'react';
import styles from './index.less';

import { FullscreenExitOutlined, ExclamationCircleOutlined, FullscreenOutlined } from '@ant-design/icons'
import React from 'react';
import { useModel } from '@umijs/max';
import { instance } from '@/services/jy-api/api';
import { useOrganizationalStore } from '';

const RightContentRender: React.FC<ChartSctionProps> = (props) => {
  const { isModal, full, fullHandle } = props
  const click = () => {
    if (isModal) {
      full && full(false)
    } else {
      fullHandle && fullHandle('section7')
      full && full(true)
    }
  }
  return <div className={styles.rightToolBar}>
    <Button icon={isModal ? <FullscreenExitOutlined /> : <FullscreenOutlined />} onClick={click}></Button>
  </div>
}

export interface ChartSctionProps {
  isModal?: boolean,
  full?: Dispatch<SetStateAction<boolean>>
  fullHandle?: (val: string) => void
}

const Index: React.FC<ChartSctionProps> = memo((props) => {
  const [config, setConfig] = useState<any>()
  const [data, setData] = useState<any>()
  const [rankList, setRankList] = useState<any[]>([])
  const { currentDepartmentId } = useModel('organizational')

  const getData = () => {
    instance('/index/Screen/courseCategory', {
      params: {
        department_id: currentDepartmentId
      }
    }).then(data => {
      const _config = {
        appendPadding: 0,
        data: data.data,
        angleField: 'course_number',
        colorField: 'name',
        radius: 0.65,
        innerRadius: 0.6,
        label: {
          type: 'spider',
          labelHeight: 28,
          content: '{name}\n{percentage}',
          style: {
            fill: '#ffffff',
            fontSize: 14
          },
        },
        interactions: [
          {
            type: 'element-selected',
          },
          {
            type: 'element-active',
          },
        ],
        legend: false,
        statistic: false,
      }
      setConfig(_config)
    })
  }
  useEffect(() => {
    if (currentDepartmentId) {
      getData()
    }
  }, [currentDepartmentId]);
  return (
    <div className={styles.section} id="section7">
      <Card TitleRnder={'课程分类'} RightContentRender={<RightContentRender {...props} />}>
        {
          config && <Pie height={300} {...config} />
        }
      </Card>
    </div>
  );
});

export default Index;

